<template>
	<view class="settings-page">
		<!-- 页面标题栏 -->
		<view class="settings-header">
			<text class="header-title">通用设置</text>
			<view class="header-del">
				<text>清除缓存</text>
				<uni-icons type="trash" size="28" @click="clearMemory"></uni-icons  ></view>
			
		</view>

		<!-- 设置列表容器 -->
		<view class="settings-list">
			<!-- 1. 语音信息自动播放（开关项） -->
			<view class="settings-item">
				<view class="item-left">
					<view class="item-icon voice-icon"></view>
					<text class="item-label">语音信息自动播放</text>
				</view>
				<view class="item-right">
					<switch checked="stateConfig.autoPlayVoice" @change="handleAutoPlayChange" color="#2D81FF" />
				</view>
			</view>

			<!-- 2. 接收信息的半径（滑块调节项） -->
			<view class="slider-item">
				<view class="item-left">
					<view class="item-icon radius-icon"></view>
					<text class="item-label">接收信息的半径</text>
				</view>
				<view class="slider-container" @touchmove.prevent="handleSliderTouchMove">
					<text class="radius-value">{{ stateConfig.receiveDistance }} 米</text>
					<slider
						v-model="stateConfig.receiveDistance"
						@change="handleRadiusChange"
						min="100"
						max="1000"
						step="100"
						show-value="true"
						activeColor="#2D81FF"
						backgroundColor="#E5E7EB"
						height="8rpx"
					/>
					<view class="slider-range">
						<view class="range-min">100m</view>
						<view class="range-max">1000m</view>
					</view>
				</view>
			</view>
	

			<!-- 4. 是否接受陌生人信息（开关项） -->
			<view class="settings-item">
				<view class="item-left">
					<view class="item-icon stranger-icon"></view>
					<text class="item-label">接受陌生人信息</text>
				</view>
				<view class="item-right">
					<switch v-model="stateConfig.acceptStrangerMsg" @change="handleStrangerChange" color="#2D81FF" />
				</view>
			</view>

			<!-- 5. 电话号码是否公开（开关项） -->
			<view class="settings-item">
				<view class="item-left">
					<view class="item-icon phone-icon"></view>
					<text class="item-label">电话号码公开</text>
				</view>
				<view class="item-right">
					<switch v-model="stateConfig.exposePhone" @change="handlePhoneExposeChange" color="#2D81FF" />
				</view>
			</view>

			<!-- 6. 是否公开评论信息（开关项） -->
			<view class="settings-item">
				<view class="item-left">
					<view class="item-icon comment-icon"></view>
					<text class="item-label">公开评论信息</text>
				</view>
				<view class="item-right">
					<switch v-model="stateConfig.exposeComment" @change="handleCommentExposeChange" color="#2D81FF" />
				</view>
			</view>
			<view class="settings-item">
				<view class="item-left">
					<view class="item-icon comment-icon"></view>
					<text class="item-label">图标是否聚合显示</text>
				</view>
				<view class="item-right">
					<switch v-model="stateConfig.joinCluster" @change="handleJoinClusterChange" color="#2D81FF" />
				</view>
			</view>
		</view>

		<!-- 底部提示栏 -->
		<view class="settings-tip">
			<text class="tip-text">设置变更将实时生效，无需重启应用</text>
		</view>
	</view>
</template>

<script>

import PreloadManager from '../../utils/PreloadManager';
const linli =uniCloud.importObject('linliChat',{ customUI:true})
export default {
	name: 'GeneralSettings',
	data() {
		return {
			stateConfig: {
				autoPlayVoice: true,
				receiveDistance: 500,
				acceptStrangerMsg: true,
				exposePhone: false,
				exposeComment: true,
				joinCluster: false
			}
		};
	},
	onLoad() {
		// 页面加载时：从本地缓存读取历史设置（恢复用户之前的选择）
		//	this.initSettingsFromStorage();
	},
	methods: {
		async saveConfig() {
		
			try {
				const res=await linli.saveConfig(this.$store.state.msg.user.userId, { ...this.stateConfig})
				if (res) {
					uni.showToast({
						title: '设置已生效'
					});
				} else {
					uni.showToast({
						icon: 'error',
						title: '失败，稍后重试'
					});
				}
			} catch (e) {
				uni.showToast({
					icon: 'error',
					title: '失败，稍后重试'
				});
			}
		},
		// 1. 语音自动播放开关变更
		handleAutoPlayChange(e) {
			console.log(e);
			this.stateConfig.autoPlayVoice = e.detail.value;
			this.saveConfig();
		
			
		},
		handleSliderTouchMove(e) {
			// 只有当触摸目标是滑块（或滑块容器）时，才阻止默认滚动行为
			const target = e.target;
			if (target.tagName === 'UNI-SLIDER' || target.closest('.slider-container')) {
				// 仅在确认是滑块交互时阻止滚动，避免误判
				e.preventDefault();
			}
		},
		// 2. 接收半径滑块变更
		handleRadiusChange(e) {
			this.stateConfig.receiveDistance = e.detail.value;
			this.saveConfig();
		},

		// 3. 消息声音开关变更
		handleSoundChange(e) {
			this.stateConfig.isSound = e.detail.value;
			this.saveConfig();
		},

		// 4. 陌生人信息开关变更
		handleStrangerChange(e) {
			this.stateConfig.acceptStrangerMsg = e.detail.value;
			this.saveConfig();
		},

		// 5. 手机号公开开关变更
		handlePhoneExposeChange(e) {
			this.stateConfig.exposePhone = e.detail.value;

			if (e.detail.value) {
				// 可选：弹出提示（提醒用户公开手机号的风险）
				uni.showModal({
					title: '提示',
					content: '公开手机号可能会收到陌生来电/短信，是否确认？',
					confirmText: '确认公开',
					cancelText: '取消',
					success: (res) => {
						if (!res.confirm) {
							this.stateConfig.exposePhone = false; // 取消则回滚状态
						} else {
							this.saveConfig();
						}
					}
				});
			}
		},
		handleJoinClusterChange() {
			this.stateConfig.joinCluster = e.detail.value;
			this.saveConfig();
		},
		initSettingsFromStorage() {
			this.stateConfig = uni.getStorageSync('stateConfig');
			console.log('内存设置',this.stateConfig);
		},

		// 6. 评论公开开关变更
		handleCommentExposeChange(e) {
			this.stateConfig.exposeComment = e.detail.value;
			this.saveConfig();
		},
		clearMemory(){
		const res=	PreloadManager.clearAllCache()
		uni.showToast({
			title: `成功清除${res}个文件`,
			position:'center'
		},2000);
		}
	}
};
</script>

<style scoped lang="scss">
/* 页面整体样式 */
.settings-page {
	background-color: #f9fafb;
	min-height: 100vh;
	padding-bottom: 80rpx;
}

/* 标题栏样式 */
.settings-header {
	display: flex;
	justify-content: space-between;
	height: 90rpx;
	line-height: 90rpx;
	padding: 0 30rpx;
	border-bottom: 1rpx solid #e5e7eb;
	background-color: #ffffff;

	.header-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #111827;
	}
	.header-del{
		font-size: 26rpx;
		font-weight: 400;
		color: #111827;
	}
	
}

/* 设置列表容器 */
.settings-list {
	margin-top: 20rpx;
	background-color: #ffffff;
}

/* 单个设置项样式 */
.settings-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100rpx;
	padding: 0 30rpx;
	border-bottom: 1rpx solid #f3f4f6;

	/* 左侧：图标+文字 */
	.item-left {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	/* 图标样式（用背景色模拟，实际项目可替换为iconfont） */
	.item-icon {
		width: 40rpx;
		height: 40rpx;
		border-radius: 8rpx;
	}
	.voice-icon {
		background-color: #4f46e5;
	}
	.radius-icon {
		background-color: #22c55e;
	}
	.sound-icon {
		background-color: #f59e0b;
	}
	.stranger-icon {
		background-color: #ef4444;
	}
	.phone-icon {
		background-color: #0ea5e9;
	}
	.comment-icon {
		background-color: #8b5cf6;
	}

	/* 标签文字 */
	.item-label {
		font-size: 28rpx;
		color: #111827;
	}

	/* 右侧：开关/滑块容器 */
	.item-right {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	/* 滑块项特殊样式（多行布局） */
}
.slider-container {
	display: flex;
	padding: 0 50rpx;
	flex-direction: column;
	gap: 12rpx;
	.slider-range {
		display: flex;
		flex-direction: row;
		width: 100%;
		justify-content: space-between;
		font-size: 20rpx;
		color: #9ca3af;
	}

	.radius-value {
		font-size: 24rpx;
		color: #2d81ff;
		align-self: flex-end;
	}
}
.slider-item {
	display: flex;
	flex-direction: column;
	font-size: 28rpx;
	padding: 0 30rpx;
	margin-top: 30rpx;
	border-bottom: 1rpx solid #f3f4f6;
	.item-left {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}
	.radius-icon {
		background-color: #22c55e;
	}
	.item-icon {
		width: 40rpx;
		height: 40rpx;
		border-radius: 8rpx;
	}
}
/* 底部提示栏 */
.settings-tip {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60rpx;
	line-height: 60rpx;
	background-color: #fffbeb;
	text-align: center;
	border-top: 1rpx solid #fde68a;

	.tip-text {
		font-size: 22rpx;
		color: #d97706;
	}
}
</style>
